<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="icon" href="/img/favicon.ico">
    <style>
        .header {
            text-align: center;
        }

        .header h1 {
            font-size: 200%;
            color: #333;
            margin-top: 30px;
        }

        .header p {
            font-size: 14px;
        }
    </style>
    <script>
        function validate_username() {
            var username = document.getElementById("user-name").value;
            var pwd1 = document.getElementById("pwd").value;
            var pwd2 = document.getElementById("pwd_confirm").value;
            if (username == '') {
                document.getElementById("tip_username").innerHTML = "<font color='red'>必须输入用户名</font>";
                document.getElementById("submit").disabled = true;
            } else {
                document.getElementById("tip_username").innerHTML = "<font></font>";
                if (pwd1 == pwd2 && pwd1 != '') {
                    document.getElementById("submit").disabled = false;
                }
            }
        }
    </script>
    <script>
        function validate_pwd() {
            var pwd1 = document.getElementById("pwd").value;
            var pwd2 = document.getElementById("pwd_confirm").value;
            <!-- 对比两次输入的密码 -->
            if (pwd1 == pwd2 && pwd1 != '') {
                document.getElementById("tip_pwd").innerHTML = "<font color='green'>两次密码相同</font>";
                var username = document.getElementById("user-name").value;
                if (username != '') {
                    document.getElementById("submit").disabled = false;
                }
            }
            else {
                document.getElementById("tip_pwd").innerHTML = "<font color='red'>两次密码不相同</font>";
                document.getElementById("submit").disabled = true;
            }
        }
    </script>
</head>
<body>
<header class="header">
    <div class="am-g">
        <h1 th:text="${blogRegisterSlogen}"></h1>
        <p th:text="${blogRegisterSlogen}"></p>
        <p th:text="${blogRegisterSencondMinorSlogen}"></p>
    </div>
    <hr/>
</header>
<section class="am-g">
    <div class="am-u-lg-6 am-u-md-8 am-u-sm-centered">
        <h3>注册</h3>
        <hr>
        <!--<div class="am-btn-group">-->
        <!--<a href="#" class="am-btn am-btn-secondary am-btn-sm"><i class="am-icon-github am-icon-sm"></i> Github</a>-->
        <!--<a href="#" class="am-btn am-btn-success am-btn-sm"><i class="am-icon-google-plus-square am-icon-sm"></i> Google+</a>-->
        <!--<a href="#" class="am-btn am-btn-primary am-btn-sm"><i class="am-icon-stack-overflow am-icon-sm"></i> stackOverflow</a>-->
        <!--</div>-->
        <!--<br>-->
        <!--<br>-->

        <form method="post" class="am-form" action="/register">
            <label for="user-name">用户名:</label>
            <input type="text" name="user-name" id="user-name" value="" onkeyup="validate_username()"><span
                id="tip_username"></span>
            <br>
            <label for="pwd">密码:</label>
            <input type="password" name="pwd" id="pwd" value="">
            <br>
            <label for="pwd_confirm">确认密码:</label>
            <input type="password" name="pwd_confirm" id="pwd_confirm" value="" onkeyup="validate_pwd()"><span
                id="tip_pwd"></span>
            <br>
            <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
            <br/>
            <div class="am-cf">
                <input type="submit" id="submit" name="" value="注 册" class="am-btn am-btn-primary am-btn-sm am-fl">
            </div>
        </form>
    </div>
</section>
<script>
    var username = document.getElementById("user-name").value;
    var pwd1 = document.getElementById("pwd").value;
    var pwd2 = document.getElementById("pwd_confirm").value;
    if (username == '' || pwd1 != pwd2) {
        document.getElementById("submit").disabled = true;
    }
</script>
<div th:include="footer.html"></div>
<link rel="stylesheet" href="/css/amazeui.min.css"/>
</body>
</html>